<template>
    <div class="index">
        <div class="wf-chart-wraper">
            <wfChartBox :data="arrayData"
                        :id="'demo1'" />
        </div>
        <div class="wf-chart-wraper">
            <wfChartBox :data="arrayData"
                        :type="'line'"
                        :title="'折线图'"
                        :id="'demo2'" />
        </div>
        <div class="wf-chart-wraper">
            <wfChartBox :data="arrayData"
                        :type="'scatter'"
                        :title="'散点图'"
                        :id="'demo3'" />
        </div>
        <div class="wf-chart-wraper">
            <wfChartBox :data="arrayData"
                        :type="'pie'"
                        :title="'饼图'"
                        :id="'demo4'" />
        </div>
        <dataLoader :show="showDataLoader"
                    @close="_closeDataLoader"
                    @confirm="loadArrayData" />
    </div>
</template>

<script>
import wfChartBox from "@/components/wfChart/index.vue";
import dataLoader from "@/components/common/dataLoader/index.vue"
import arrayData from "@/data/mock.js"
export default {
    name: "index",
    components: {
        // wfChart,
        wfChartBox,
        dataLoader
    },
    data () {
        return {
            arrayData: arrayData,
            showDataLoader: true
        }
    },
    methods: {
        loadArrayData (array) {
            console.log('confirm', array);
            this.arrayData = array
            this._closeDataLoader()
        },
        _showDataLoader () {
            this.showDataLoader = true
        },
        _closeDataLoader () {
            this.showDataLoader = false
        }
    }
};
</script>

<style scoped lang="scss">
.index {
    flex: 1 1 auto;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;

    .wf-chart-wraper {
        width: 50%;
        height: 50vh;
        padding: 1vw;
        box-sizing: border-box;
        border: 1px solid #666;
        background: #f5f5f5;
    }
}
</style>